/**
 * @file form
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  Component,
  PureComponent,
  PropTypes
} from 'react';
import {findDOMNode} from 'react-dom';
import {Renderer, render} from '../../renderer';
import * as cx from 'classnames';
import * as assign from 'object-assign';
import {Enhance as HocCrud} from '../hoc-crud';
import './list-item';
import '../table/table.scss';

@Renderer({
  name: 'crud-list',
  desc: '...',
  test: /(?:^|\/)crud\/list$/
})
@HocCrud({
  title: '列表',
  hasColumTool: false,
  hasBulkCheckbox: true
})
export default class List extends PureComponent {
  static propTypes = {
    bulkActions: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.string.isRequired,
      actionType: PropTypes.string.isRequired
    })),
    className: PropTypes.string,
    draggable: PropTypes.bool,
    listItem: PropTypes.object.isRequired,
    rows: PropTypes.arrayOf(PropTypes.object),
    data: PropTypes.object,
    title: PropTypes.string,
    placeholder: PropTypes.string,
    loading: PropTypes.bool,

    // events
    onBulkAction: PropTypes.func,
    onAction: PropTypes.func,
    onSaveOrder: PropTypes.func,
    onQuickSave: PropTypes.func
  };

  static defaultProps = {
    title: 'List',
    placeholder: '暂无数据',
    className: 'b-a'
  };

  constructor(props) {
    super(props);
    const {rows} = props;
    this.state = {
      rows,
      pristineRows: rows && rows.concat(),
      dragging: false
    };

  }

  render() {

    const rows = this.props.stateRows || [];
    const dragging = this.props.stateDragging;
    const {
      $path,
      placeholder,
      onAction,
      onHighlight,
      loading,
      listItem,
      locals,
      draggable,
      data,
      onNotify,
      sendNotify,
      listClassName
    } = this.props;

    return (
      <ul className={cx('list-group list-group-striped auto', listClassName)}>
        {rows.length ? (rows.map(item => {

          return render(`${$path}/list-item`, listItem, {
            key: item.$id,
            item,
            data: assign({}, data, item),
            onCheck: this.props.toggle,
            onRequestAction: onAction,
            onRequestHighlight: onHighlight,
            onFieldValueChange: this.props.handleFieldValueChange,
            onFieldValueSave: this.props.handleFieldValueSave,
            disabled: loading,
            disableQuickEdit: dragging || loading,
            bulkActions:this.props.bulkActions,
            className: cx(listItem.className, {
              'list-modified': item.$modified,
              'list-highlight': item.$highlight
            }),
            findRow: this.props.findRow,
            moveRow: this.props.moveRow,
            moveRowConfirm: this.props.moveRowConfirm,
            dragging,
            draggable,
            onNotify,
            locals: assign({},locals, item),
            sendNotify
          });
        })) : (
          <li className="list-group-item clearfix text-muted">{placeholder}</li>
        )}
      </ul>
    );
  }
}
